<template>
  <div class="login-container">
    <div class="header">
      <h4>学生成绩管理系统</h4>
    </div>
    <div style="position: relative;">
      <el-form class="login-form" :model="loginForm" :rules="loginRules" ref="loginForm" autoComplete="on"
               label-position="left">
        <el-form-item class="inp" prop="account">
          <div class="UserName">
            <svg-icon icon-class="user1" :class="'phone'" />
            <el-input name="account" type="text" autoComplete="off" v-model="loginForm.account" placeholder="请输入帐号"
                      maxlength="12" />
          </div>
        </el-form-item>
        <el-form-item class="inp" prop="password">
          <div class="Password">
            <svg-icon icon-class="password" :class="'icon-password'" />
            <el-input name="password" autoComplete="off" placeholder="请输入密码" minlength="6" :type="pwdType"
                      v-model="loginForm.password"></el-input>
          </div>
        </el-form-item>
        <p class="forgetPas" @click="forget">忘记密码?</p>
        <el-form-item>
          <div class="t-center">
            <el-button :loading="loading" @click.native.prevent="handleLogin" type="primary" class="btn">登&nbsp;&nbsp;录
            </el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { initializeRouter } from "@/utils/index";
import { getToken, setToken } from "@/utils/auth";

export default {
  name: "login",
  data() {
    return {
      loginForm: {
        account: "a0000001",  //a0000001
        password: "a123456", //a123456
      },
      loginRules: {
        account: [{ trigger: "change", required: true, message: "帐号不能为空" }],
        password: [{ trigger: "change", required: true, message: "密码必须为6-18位的字母+数字组合" }],
      },
      loading: false,
      pwdType: "password",
      flag: null,
    };
  },
  methods: {
    getUserInfo() {
      this.$store.dispatch("GetInfo");
    },
    // 拉取菜单
    loadMenu() {
      this.$api.common.getUserMenu()
        .then((res) => {
          if (res.code === 200) {
            let route = initializeRouter(res.data);
            console.log(route);
            this.$store.commit("setRoutes", route);
            this.$router.options.routes = route;
            this.$router.addRoutes(route);
            this.$router.push({ path: "/" });
            this.getUserInfo();
          }
        });
    },
    handleLogin() {
      if (getToken()) {

        this.loadMenu();
      } else {
        this.login();
      }
    },
    login() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          let params = {
            account: this.loginForm.account,
            password: this.loginForm.password,
          };
          this.$api.login.userLogin(params)
            .then((res) => {
              if (res.code === 200) {
                console.log(res);
                setToken(res.data.token);
                this.$store.commit("setToken", res.data.token);
                this.loadMenu();
              }else {
                this.$message.warning(res.msg)
              }

              this.loading = false;
            }).catch(() => {
            this.loading = false;
          });
        } else {
          console.log("error submit!!");

          return false;
        }
      });
    },
    forget() {
      this.$router.push({ path: "/forget" });
    },
  }
};
</script>
<style lang="scss">
.login-container {
  .el-button.is-loading:before {
    background: none;
  }

  .el-form-item {
    border-radius: 5px;
    color: #454545;
  }

  .el-input {
    display: inline-block;

    input {
      -webkit-appearance: none;
      border-radius: 0px;
      color: #999;
      border: none;
      width: 260px;
      height: 42px;
      text-align: left;
      border-left: 1px solid #dcdcdc !important;

      &::-webkit-input-placeholder {
        color: #999999;
      }

      &::-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color: #999999;
        opacity: 1;
      }

      &::-moz-placeholder { /* Mozilla Firefox 19+ */
        color: #999999;
        opacity: 1;
      }

      &:-ms-input-placeholder { /* Internet Explorer 10-11 */
        color: #999999;
      }

      &::-ms-input-placeholder { /* Microsoft Edge */
        color: #999999;
      }

      &:-webkit-autofill {
        -webkit-text-fill-color: #999 !important;
        // transition: background-color 5000s ease-in-out 0s;
        -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
      }

      &::-ms-clear { /*上篇提到过，删除文本框中的叉号*/
        display: none;
      }

      &::-ms-reveal { /*删除密码框中的小眼睛*/
        display: none;
      }
    }
  }
}
</style>
<style scoped>
/deep/ .el-form-item__error{
  left: 80px;
}
</style>
<style lang="scss">
@import "login";
</style>
